<template>
  <div style="height: 100%;background-color:white ;">
    <el-row>
      <div>
        <div style="display: inline-block">
          <el-button icon="el-icon-back" size="small" style="font-family: Microsoft YaHei" type="text"
                     @click="goBack">返回
          </el-button>
        </div>
        <div style="display: inline-block">|</div>
        <div style="display: inline-block;">
          <div style="padding-bottom: 15px;margin-left:10px">
            <span style="font-family: Microsoft YaHei;display: inline-block; font-size: 14px;">查看文章</span>
          </div>
        </div>
        <div style="border-bottom: solid 1px #C9C9C9;"></div>
      </div>
    </el-row>
    <el-row class="bottom-space" style="margin-top: 10px;">
      <el-col :span="24">
        <div>
          <div style="width: 420px; float: right">
            <el-input v-model="journalArticle.name" placeholder="请输入文章名称" @keyup.enter.native="advanceConfirm">
              <i class="el-input__icon el-icon-search" slot="prefix"></i>
              <el-button :icon="appendIcon" slot="append" @click="switchAppend"></el-button>
            </el-input>
          </div>
          <div id="advance" style="padding: 10px;float: right" v-if="showAdvance">
            <div class="block" style="margin-top: 10px">
              <div style="width: 100px;display: inline-block;text-align: right">文章DOI</div>
              <div style="display: inline-block">
                <el-input placeholder="请输入文章DOI" v-model="journalArticle.doi" size="small"
                          style="width: 300px;"></el-input>
              </div>
            </div>
            <div class="block" style="margin-top: 10px">
              <div style="width: 100px;display: inline-block;text-align: right">作者</div>
              <div style="display: inline-block">
                <el-input placeholder="请输入文章作者" v-model="journalArticle.author" size="small"
                          style="width: 300px;"></el-input>
              </div>
            </div>
            <div class="block" style="margin-top: 10px">
              <div style="width: 100px;display: inline-block;text-align: right">所属目录</div>
              <div style="display: inline-block">
                <el-input placeholder="请输入文章所属目录" v-model="journalArticle.classify" size="small"
                          style="width: 300px;"></el-input>
              </div>
            </div>
            <div style="margin-top: 60px; right: 10px;">
              <el-row>
                <el-col :offset="6" :span="6">
                  <div style="margin-left: 90px;height: 32px; width: 88px;">
                    <el-button size="small" v-on:click="advanceCancel">取 消</el-button>
                  </div>
                </el-col>
                <el-col :offset="2" :span="2">
                  <div style="margin-left: 30px;height: 32px; width: 88px;">
                    <el-button size="small" v-on:click="reset">重置</el-button>
                  </div>
                </el-col>
                <el-col :offset="2" :span="2">
                  <div div style="margin-left: 30px;height: 32px; width: 88px;">
                    <el-button size="small" type="success" v-on:click="advanceConfirm">确 定</el-button>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-table :data="tableData" border style="width: 100%;" stripe :height="tableHeight">
        <el-table-column label="文章名称" min-width="220" prop="name">
          <template slot-scope="scope">
            <span v-html="scope.row.name"></span>
          </template>
        </el-table-column>
        <el-table-column label="文章DOI" min-width="120" prop="doi"></el-table-column>
        <el-table-column label="作者" min-width="120" prop="author"></el-table-column>
        <el-table-column label="所属目录" min-width="100" prop="classify"></el-table-column>
        <el-table-column label="操作" min-width="100">
          <template slot-scope="scope">
            <span><el-link type="primary"
                           @click.prevent="detail(scope.row.id)">编辑</el-link></span>
            <span><el-link type="primary" @click.prevent="editArticleMetadata(scope.row.id,scope.$index)">元数据</el-link></span>
            <span>
              <el-link type="primary" @click.prevent="openDrawer(scope.row)">预览PDf</el-link>
            </span>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row>
      <div>
        <el-pagination
          :total="totalNum"
          :page-size="pageSize"
          :page-sizes="[5, 10, 15, 20, 50, 100]"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          background
          layout="total, sizes, prev, pager, next, jumper"
          style="text-align: right;"></el-pagination>
      </div>
    </el-row>
    <el-drawer v-if="dialogVisible" :modal="false"
               :size="CONST.WORKSPACE_WIDTH + 'px'"
               :title="articleName"
               :visible.sync="dialogVisible"
               @close="dialogVisible = false">
      <div style="text-align: right;padding-right: 80px; margin-bottom: 5px;">
        <el-button size="small" type="success" @click="downloadPdf">下载</el-button>
      </div>
      <div :style="{height: CONST.WORKSPACE_HEIGHT - 50 + 'px'}" style="overflow-y: auto;overflow-x: hidden;">
        <pdf v-for="i in articlePdfPages" :key="i" :page="i" :src="articlePdfUrl"></pdf>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import pdf from 'vue-pdf'
export default {
  name: "JournalDetail",
  components: {
    pdf
  },
  data() {
    return {
      tableData: [],
      totalNum: 0,
      noData: true,
      currentPage: 1, // 第几页
      pageSize: 10, // 每页显示的数据个数
      journalArticle: {},
      showAdvance: false,
      appendIcon: "el-icon-caret-bottom",
      editType: '',
      dialogVisible: false,
      articleName: '',
      articlePdfUrl: '',
      articlePdfPages: 1,
      articleDownloadUrl: ''
    }
  },
  methods: {
    getTableData: function () {
      let param = new URLSearchParams();
      param.append("journalArticleStr", JSON.stringify(this.journalArticle));
      param.append("currentPage", this.currentPage);
      param.append("pageSize", this.pageSize);
      this.axios.post('/pmph/action/journal/selectArticleList', param).then((response) => {
        this.noData = response.data.total <= 0;
        this.tableData = response.data.records;
        this.totalNum = response.data.total;
      }).catch((error) => {
        console.error(error);
        this.tableData = [];
        this.noData = true;
        this.$message.error("未能请求到数据");
      })
    },
    handleCurrentChange: function (val) {
      this.currentPage = val;
      this.getTableData();
    },
    handleSizeChange(value) {
      this.pageSize = value;
      this.getTableData();
    },
    goBack: function () {
      this.$router.push("/journalLib");
    },
    detail: function (id) {
      this.$router.push({
          path: '/journalLib/articleDetail',
          query: {
            id: id,
            editType: this.editType
          }
        }
      )
    },
    editArticleMetadata(id, index) {
      this.$router.push({
        path: "/journalLib/articleMetadata",
        query: {
          id: id,
          metadata: this.tableData[index].metadata,
          disabled: false
        }
      });
    },
    openDrawer(row) {
      this.articleDownloadUrl = row.pdfPath;
      this.previewPdf(row.pdfPath);
      this.articleName = row.name;
      this.dialogVisible = true;
    },
    previewPdf(url) {
      this.articlePdfUrl = url;
      this.articlePdfUrl = pdf.createLoadingTask(this.articlePdfUrl)
      this.articlePdfUrl.promise.then(pdf => {
        this.articlePdfPages = pdf.numPages
      })
    },
    downloadPdf() {
      window.location.href = this.articleDownloadUrl;
    },
    advanceConfirm: function () {
      this.currentPage = 1;
      this.getTableData();
    },
    switchAppend: function () {
      if (this.showAdvance) {
        this.showAdvance = false;
        this.appendIcon = "el-icon-caret-bottom";
      } else {
        this.showAdvance = true;
        this.appendIcon = "el-icon-caret-top";
      }
    },
    advanceCancel: function () {
      this.showAdvance = false;
    },
    reset: function () {
      this.$set(this.journalArticle, 'name', '')
      this.$set(this.journalArticle, 'doi', '')
      this.$set(this.journalArticle, 'author', '')
      this.$set(this.journalArticle, 'classify', '')
    },
  },

  beforeRouteLeave(to, from, next) {
    // 列表页面跳转到 详情页时，设置需要缓存
    if (to.name == 'JournalLib') {
      to.meta.isUseCache = true
    }
    next()
  },
  activated() {
    if (!this.$route.meta.isUseCache) {
      this.reset()
      this.journalArticle.journalId = this.$route.query.id;
      this.editType = this.$route.query.editType;
      this.getTableData();
    }
  },
  created() {
    this.tableHeight = CONST.WORKSPACE_HEIGHT - 140;
    this.getTableData();
  }
}
</script>

<style scoped>

</style>
